<template>
    <div :style="{width: width}">
        <!--    图片上传-->
        <div v-if="type=='image'" class="file-container" style="width: 100%">
            <div v-for="(item,index) in currentFileList" class="file-img-container">
                <div class="img-item">
                    <img :src="item" @click="handlePictureCardPreview(item)" class="file-img" alt="">
                    <i class="el-icon-close close-icon img-close-icon" @click="removeFile(index)"></i>
                </div>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            <div>
                <el-upload
                    action="uploadurl"
                    list-type="picture-card"
                    :show-file-list="false"
                    multiple
                    accept=".jpg,.jpeg,.png"
                    :disabled="currentFileList.length >= limit"
                    :http-request="uploadSectionFile"
                    v-if="processNum==0">
                    <i class="el-icon-plus" @click="handleOnChange"></i>
                </el-upload>
                <div v-else class="upload-progress">
                    <el-progress :width="80" type="circle" :percentage="processNum"></el-progress>
                </div>
            </div>
        </div>

        <!--    图片上传 -->

        <!--    文件上传-->
        <div v-if="type=='file'">
            <el-upload

                ref="upload"
                action="uploadurl"
                :disabled="currentFileList.length>=limit"
                :http-request="uploadSectionFile"
                :multiple="true"
                :show-file-list="false">
                <el-button
                    size="small"
                    type="primary"
                    :disabled="currentFileList.length>=limit"
                    @click="handleOnChange">点击上传
                </el-button>
            </el-upload>
            <div class="file-container2">
                <div v-for="(item,index) in currentFileList" class="file-content">
                    <div class="file-item" :style="{width:`${fileWidth}px`}">
                        <i class="el-icon-document"></i>
                        <!--            <el-tooltip class="item" effect="dark" :content="item" placement="top">-->
                        <div class="file-name flow1">{{ item.substr(item.lastIndexOf('/') + 1) }}</div>
                        <!--            </el-tooltip>-->
                    </div>
                    <i class="el-icon-close close-icon" @click="removeFile(index)"></i>
                </div>
            </div>
        </div>
        <!--    文件上传-->

    </div>
</template>
<script>

export default {
    name: "upload-file",
    props: {
        fileList: {
            type: [Array, String],
            default: () => []
        },
        fileIds: {
            type: Array,
            default: () => []
        },
        width: {
            type: String,
        },
        type: {
            type: String,
            default: 'upload'
        },
        limit: {
            type: [Number, String],
            default: 1
        },
        uploadPath: {
            type: String,
        },
        fileWidth: {
            type: [Number, String],
            default: 200
        }
    },
    data() {
        return {
            fileListIds: [],
            currentFileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            processNum: 0,
        }
    },
    watch: {
        fileList: {
            immediate: true,
            handler(val, newval) {
                if(typeof val === 'string') {
                    this.currentFileList = val.split(',') || [];
                } else {
                    this.currentFileList = val || [];
                }
            }
        },
        fileIds: {
            immediate: true,
            handler(val, newval) {
                this.fileListIds = val || [];
            }
        }
    },
    methods: {
        handleFile(url) {

        },
        /**文件上传*/
        uploadSectionFile(param) {
            const file = param.file;
            const fileType = file.type;
            const isLt2M = file.size / 1024 / 1024 < 30;
            const types = ['image/jpeg', 'image/jpg', 'image/png'];
            const isImage = types.includes(fileType);
            if (!isImage && this.type === 'image') {
                this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
            }
            this.processNum = 0
            if (!isLt2M) {
                this.$message.error("只能上传图片大小小于30M");
                return;
            }
            let fileObj = param.file;
            this.formData = new FormData();
            this.formData.append("file", fileObj);
            this.$http({
                url: '/api/common/uploadPicture',
                method: 'post',
                data: this.formData,
                onUploadProgress: progressEvent => {
                    this.processNum = (progressEvent.loaded / progressEvent.total * 100 | 0)
                }
            }).then(res => {
                this.processNum = 0;
                this.fileListIds.push(res.data.toString());
                this.currentFileList.push(res.data);
                console.log('this.currentFileList',this.currentFileList)
                this.$emit('change', this.currentFileList.join());
            }).catch(err => {
                this.processNum = 0
                this.$message.error('文件上传失败！')
            })
        },
        /** 文件删除*/
        removeFile(index) {
            this.currentFileList.splice(index, 1);
            this.fileListIds.splice(index, 1);
            if (this.currentFileList.length === 0) {
                this.$emit('change', undefined);
            } else {
                this.$emit('change', this.currentFileList.join());
            }
        },
        /**文件清除*/
        clearFiles() {
            this.$refs.upload.clearFiles()
        },
        /** 文件下载*/
        // downFile(fileId, fileName) {
        //   downloadFile(fileId).then(res => {
        //     // let blob = new Blob([res], {type: "application/msword"});
        //     let blob = new Blob([res], {type: "application/msword"});
        //     let Temp = document.createElement("a");
        //     Temp.href = URL.createObjectURL(blob);
        //     Temp.download = `${fileName}`;
        //     document.body.append(Temp);
        //     Temp.click();
        //     URL.revokeObjectURL(Temp.href);
        //   }).catch(err => {
        //     console.log(err);
        //   })
        // },

        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
        handleOnChange() {
            if (this.currentFileList.length >= this.limit) {
                this.msgError(`最多只能上传${this.limit}个文件`);
            }
        }
    }
}
</script>
<style lang="scss" scoped>

::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
}

.file-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    color: #fff;
}

.file-content:hover {
    background-color: rgba(204, 204, 204, .2);
    color: red;
}

.file-name {
    font-size: 14px;
    padding-right: 10px;
}

.file-container {
    display: flex;
    flex-wrap: wrap;
}

.file-img-container {
    width: 100px;
    margin-right: 5px;
}

.file-container2 {
    display: flex;
    width: 200px;
    flex-direction: column;
}

.file-item {
    color: #606266;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.close-icon {
    cursor: pointer;
    color: #606266;
}

.file-img {
    width: 80px;
    height: 80px;
}

.img-item {
    width: 100px;
    height: 100px;
    position: relative;
    border: solid 1px #ccc;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.img-close-icon {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(255, 255, 255, 0);
}

.img-item:hover {
    cursor: pointer;
}

.img-item:hover .img-close-icon {
    background: #ccc;
    border-radius: 50%;
    color: #ffffff;
}

.upload-progress {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #ccc;
    border-radius: 8px;
}
</style>
